<!DOCTYPE html>
<html>

<head> 
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
	</script>
	<title>KS_ESP32_CAM SETTING</title> 
	<style type="text/css">
		body {
			background: #c3f3b9;
			/* background: url('http://api.btstu.cn/sjbz/?lx=m_dongman') no-repeat fixed; */
			background-size: 100%;
			text-align: center;
		}

		h1 {
			color: #030202;
		}

		h2 {
			margin-right: 60%;
			color: #e20303;
		}

		h3 {
			margin-right: 40%;
			color: #130e0e;
		}

		p {
			margin-right: 30%;
			color: #080808;
		}

		h5 {
			color: #535252;
		}

		.button {
			background-color: #555555;
			border: none;
			color: white;
			padding: 5px 15px;
			font-size: 16px;
			border-radius: 5px;
		}

		.input1 {
			border: none;
			padding: 5px 20px;
			background: #dddddd;
			width: 10%;
			border-radius: 10px;
			margin-bottom: 1%;
		}

		.bt1 {
			background-color: #555555;
			/* Green */
			border: none;
			color: white;
			margin-top: 10px;
			padding: 5px 15px;
			margin-left: 5%;
			font-size: 12px;
			border-radius: 5px;
		}

		@media screen and (max-width: 480px) {
			h2 {
				margin-right: 80%;
				color: #C0C0C0;
			}

			.input1 {
				border: none;
				padding: 5px 20px;
				background: #dddddd;
				width: 30%;
				border-radius: 10px;
				margin-bottom: 1%;
			}

			p {
				margin-right: 50%;
				color: #C0C0C0;
			}
		}
	</style>
</head>

<body>
	<h1>信息设置</h1>
	<h2>必填</h2>
	<h3>哔哩哔哩uid</h3>
	<input class="input1" type="text" id="uid" placeholder="例如:59041601">
	<button class="bt1" id="test_uid">测试</button><br>
	<h5>哔哩哔哩uid每个用户唯一，用于查询粉丝数和关注数，如果没用设置默认为up主的uid 例如:59041601</h5>
	<h3>所在城市拼音</h3>
	<input class="input1" type="text" id="city" placeholder="例如:chengdu">
	<button class="bt1" id="test_cy">测试</button><br>
	<h5>所选城市为市级城市名称，该接口调用的为心知天气接口，县级和区级为付费接口，暂不支持，
		<br>请填写城市拼音，默认为成都,例如:chengdu</h5>
	<button class="button" id="up">提交</button>
	<h2>选填</h2>
	<h3>心知天气密匙 </h3>
	<input class="input1" type="text" id="pass" placeholder="例如:SybN2IXZM2B_vayTP">
	<button class="bt1" id="test_xz">验证</button><br>
	<h5>由于使用的是您自己申请的心知天气id，每日访问存在上限，如果想要更好的体验，请更换为自己的id和密匙</h5>
	<button class="button" id="up2">提交</button>
	<h2>百度AI</h2>
	<p>百度物体识别client_id</p>
	<input class="input1" type="text" id="img_client_id" placeholder="例如:wVsguVqncQExZFyVMOAyC13Y">
	<p>百度物体识别client_secret</p>
	<input class="input1" type="text" id="img_client_secret">
	<p>百度物体识别token</p>
	<input class="input1" type="text" id="img_token">
	<button class="bt1" id="test_img_token">获取token</button><br>
	<h5>在获取token后的结果中将access_token复制到这个token栏中</h5>
	<p>百度文字识别client_id</p>
	<input class="input1" type="text" id="ocr_client_id" placeholder="例如:6Fu8TqQgiI5t1GBALHPov4F9">
	<p>百度文字识别client_secret</p>
	<input class="input1" type="text" id="ocr_client_secret">
	<p>百度文字识别token</p>
	<input class="input1" type="text" id="ocr_token">
	<button class="bt1" id="test_ocr_token">获取token</button><br>
	<h5>在获取token后的结果中将access_token复制到这个token栏中</h5><br>
	<h5>百度token可以在百度开放平台申请，详细教程请移步<a href="https://ai.baidu.com/ai-doc/REFERENCE/Ck3dwjhhu">百度云</a>
		<br><button class="button" id="mup">提交</button>
</body>
<script>
	$(document).ready(function () {
		var aa = function (x) {
			var re = /^\w{3,30}$/
			if (x == '') {
				alert('不能为空');
				return 1;
			}
		}
		$.test = aa;
		$("#up").click(function () {
			var uid = $("#uid").val();
			var city = $("#city").val();
			if ($.test(city)) {
				return;
			}
			if ($.test(uid)) {
				return;
			}
			var str = JSON.stringify({
				"n": 1,
				"uid": uid,
				"city": city
			});
			$.post("/must", str, function (data, status) {
				alert("数据: \n" + data + "\n状态: " + status);
			});
		});
		$("#up2").click(function () {
			var pass = $("#pass").val();
			var str = JSON.stringify({
				"n": 0,
				"pass": pass
			});
			$.post("/must", str, function (data, status) {
				alert("数据: \n" + data + "\n状态: " + status);
			});
		});
		$("#test_uid").click(function () {
			var uid = $("#uid").val();
			if ($.test(uid)) {
				return;
			}
			var url = "https://api.bilibili.com/x/relation/stat?vmid=" + uid;
			window.open(url);
		});
		$("#test_img_token").click(function () {
			var id = $("#img_client_id").val();
			var secret = $("#img_client_secret").val();
			if ($.test(id)) {
				return;
			}
			if ($.test(secret)) {
				return;
			}
			var url = "https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=" +
				id + "&client_secret=" + secret;
			window.open(url);
		});
		$("#test_ocr_token").click(function () {
			var id = $("#ocr_client_id").val();
			var secret = $("#ocr_client_secret").val();
			if ($.test(id)) {
				return;
			}
			if ($.test(secret)) {
				return;
			}
			var url = "https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=" +
				id + "&client_secret=" + secret;
			window.open(url);
		});
		$("#test_cy").click(function () {
			var city = $("#city").val();
			if ($.test(city)) {
				return;
			}
			var url =
				"https://api.seniverse.com/v3/weather/daily.json?key=SSuB-x5pvaLBddTr_&location=" +
				city + "&language=zh-Hans&unit=c&start=0&days=5";
			window.open(url);
		});
		$("#test_xz").click(function () {
			var pass = $("#pass").val();
			if ($.test(city)) {
				return;
			}
			var url = "https://api.seniverse.com/v3/weather/daily.json?key=" + pass +
				"&location=taiyuan&language=zh-Hans&unit=c&start=0&days=5";
			window.open(url);
		});
		$("#mup").click(function () {
			var img_client_id = $("#img_client_id").val();
			var img_client_secret = $("#img_client_secret").val();
			var img_token = $("#img_token").val();
			
			var ocr_client_id = $("#ocr_client_id").val();
			var ocr_client_secret = $("#ocr_client_secret").val();
			var ocr_token = $("#ocr_token").val();
			if ($.test(img_client_id)) {
				return;
			}

			var str = JSON.stringify({
				"n": 2,
				"img_client_id": img_client_id,
				"img_client_secret": img_client_secret,
				"img_token": img_token,
				"ocr_client_id": ocr_client_id,
				"ocr_client_secret": ocr_client_secret,
				"ocr_token": ocr_token,
			});
			$.post("/must", str, function (data, status) {
				alert("数据: \n" + data + "\n状态: " + status);
			});
		});
	});
</script>

</html>